<template>
  <div class="bg">
    <div class="top">
      <!-- 头部 -->
      <div class="purchase-style-header-forever">
        <div class="purchase-style-header-forever-item">
          <div class="purchase-style-header-forever-title">{{ detail.productName + detail.manufacturersName + detail.markName }}</div>
          <div class="purchase-style-header-forever-content">
            <div class="purchase-style-header-forever-conten-price">{{ marketPrice.price || 0 }}</div>
            <div class="purchase-style-header-forever-conten-price-shengjiang">
              <div class="purchase-style-header-forever-conten-price-shengjiang-item">
                <div class="purchase-style-header-forever-conten-price-shengjiang-item-icon" v-if="marketPrice.go_up !== 0">
                  <img :src="marketPrice.go_up < 0 ? '@/assets/update/xaijiang_icon02@2x.png' : '@/assets/update/shangsheng_icon02@2x.png'" />
                </div>
                <div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" style="color: #333333;" v-if="marketPrice.go_up == 0">+0</div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" style="color: #D13123;" v-else-if="marketPrice.go_up > 0">+{{ marketPrice.go_up }}</div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" v-else>{{ marketPrice.go_up }}</div>
                </div>
                <div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" style="margin-left: 36px;color: #333333;" v-if="marketPrice.changePercentage == 0">0%</div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" style="margin-left: 36px;color: #D13123;" v-else-if="marketPrice.changePercentage > 0">{{ marketPrice.changePercentage }}%</div>
                  <div class="purchase-style-header-forever-conten-price-shengjiang-item-value" style="margin-left: 36px;" v-else>{{ marketPrice.changePercentage }}%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="purchase-style-content-forever">
        <div class="purchase-style-content-forever-title">折线图</div>
        <!-- 选择头部 -->
        <div class="purchase-style-content-forever-header">
          <div class="purchase-style-content-forever-header-left">
            <div class="purchase-style-content-forever-header-left-item" :class="{'purchase-style-content-forever-header-left-item-active': cellIndex == index}" v-for="(item, index) in navList" :key="index" @click.stop="navClick(index)">{{ item }}</div>
          </div>
          <div style="display: flex;width: 50%; padding-left: 40px; align-self: center;">
            <span style="font-family: Microsoft YaHei; font-weight: bold;font-size: 18px;color: #333333; display: flex; align-self: center; margin-right: 20px;display: flex;flex-shrink: 0;">日期</span>
            <el-date-picker
              style="width: 300px;"
              v-model="priceTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
            <el-button style="background: #F42551; color: #FFF; height: 40px; padding: 0 32px; border-radius: 5px; margin-left: 20px;" @click.stop="searchChange">查询</el-button>
          </div>
        </div>
        <!-- echarts图表 -->
        <div class="echarts-style" id="main"></div>
        <!-- 历史价格 -->
        <div class="purchase-style-content-forever-title">历史价格</div>
        <div style="width: 100%; height: 500px;">
            <el-table
            :header-cell-style="{fontSize: '15px', backgroundColor: '#EFEFEF',color:'#333'}"
            :data="historyList"
            height="450"
            ref="myTable"
            v-el-table-infinite-scroll="historyValue"
            style="width: 100%; margin-top: 30px; margin-bottom: 40px; overflow: auto;">
            <el-table-column
              fixed
              label="日期">
              <template slot-scope="scope">
                <span v-if="scope.row" style="font-size: 16px;color: #333333;">{{ scope.row.priceTime.split(' ')[0] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="价格">
              <template slot-scope="scope">
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #333333;" v-if="scope.row && scope.row.go_up == 0">{{ scope.row.price }}</span>
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #D13123;" v-if="scope.row && scope.row.go_up > 0">{{ scope.row.price }}</span>
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #48AF92;" v-if="scope.row && scope.row.go_up < 0">{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed
              label="涨跌">
              <template slot-scope="scope">
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #333333;" v-if="scope.row && scope.row.go_up == 0">{{ scope.row.go_up }}</span>
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #D13123;" v-if="scope.row && scope.row.go_up > 0">{{ scope.row.go_up }}</span>
                <span style="font-family: Microsoft YaHei;font-size: 17px;color: #48AF92;" v-if="scope.row && scope.row.go_up < 0">{{ scope.row.go_up }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import dataOptions from '../../utils/echartsOption.js'
export default {
  data() {
    return {
      priceTime: "",
      selTime: "WEEK",
      navList: ["周线", "月线", "季线"],
      option: {},
      ids: "",
      aptitudeData: [],
      myChart: null,
      detail: "",
      marketPrice: "",
      historyList: [],
      pageNo: 1,
      cellIndex: 0
    }
  },
  async mounted() {
  },
  created() {
    console.log("来到这了", this.$route.query.id);
    let date = new Date().getFullYear()
    + "-" + ((new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : ("0" + (new Date().getMonth() + 1))) 
    + "-" +  (new Date().getDate() > 9 ? new Date().getDate() : ("0" + new Date().getDate()))
    this.priceTime = date
    setTimeout(()=> {
      if (this.$route.query.id) {
        this.ids = this.$route.query.id
        this.lineChartDetail()
        this.initChang()
        this.history()
      }
    }, 500)
  },
  watch: {
    "$route.name": {
      handler(newName) {
        if (newName === "purchase_hangqing_detail") {
          console.log("数据：",newName);
          let date = new Date().getFullYear()
          + "-" + ((new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : ("0" + (new Date().getMonth() + 1))) 
          + "-" +  (new Date().getDate() > 9 ? new Date().getDate() : ("0" + new Date().getDate()))
          this.priceTime = date
          setTimeout(()=> {
            if (this.$route.query.id) {
              this.ids = this.$route.query.id
              this.lineChartDetail()
              this.initChang()
              this.history()
            }
          }, 500)
        }
      }
    }
  },
  methods: {
    historyValue() {
      if (this.pageNo !== 1) {
        this.history()
      }
    },
    // 获取历史价格
    history(){
				let data = {'pageNo': this.pageNo, 'pageSize': 10, 'rawMaterialPricesId': this.ids}
				this.$apiFun.history(data).then(res => {
          if (res.result.rows.length > 0) {
            if(res.result.rows.length == 0){
              this.historyList = res.result.rows
              this.pageNo += 1
            }else{
              this.historyList = this.historyList.concat(res.result.rows)
              this.pageNo += 1
            }
          }
        })
			},
    initChang() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('main'));
      // let options = dataOptions()
      this.option = dataOptions()
      this.option.series = [{
				data: [],
				type: 'line',
				lineStyle: { color: '#3756DF' },
				itemStyle: { color: '#3756DF' },
				smooth: true,
				areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(67, 106, 218, 0.2)'}, {offset: 1, color: 'rgba(69, 107, 220, 0)' }])
				}
			}]
      this.lineChart(this.ids, this.selTime);
      console.log("图标数据：", this.option);
    },
    lineChartDetail(){
				this.$apiFun.lineChartDetail(this.ids).then(res => {
					this.detail = res.result
					this.marketPrice = res.result.marketPrice
          this.$forceUpdate()
				})
			},
    // 折线图
		lineChart(id,time){
      this.$apiFun.lineChart({rawMaterialPricesId: id, type: time, priceTime: this.priceTime}).then(res => {
        this.aptitudeData = res.result
        res.result.forEach(item => {
          if (item) {							
            if (item.priceTime) {
              this.option.xAxis.data.push(item.priceTime.split(" ")[0])
            }
            // this.option.xAxis.data.reverse()
            this.option.series[0].data.push(item.price)
            // this.option.series[0].data.reverse()
          }
        })
        // 绘制图表
        this.myChart.setOption(this.option);
      })
		},
    navClick(index) {
				this.cellIndex = index
				let timeData = ["WEEK","MONTH","SEASON"]
				this.selTime = timeData[index]
				this.option.xAxis.data = []
				this.option.series[0].data = []
				this.initChang()
		},
    searchChange() {
      const now = new Date(this.priceTime);
			const year = now.getFullYear()
			const month = (now.getMonth() + 1) > 9 ? (now.getMonth() + 1) : ('0' + (now.getMonth() + 1))
			const day = now.getDate() > 9 ? now.getDate() : ('0' + now.getDate())
			this.priceTime = year + '-' + month + '-' + day
      this.option.xAxis.data = []
			this.option.series[0].data = []
      this.initChang()
    }
  },
}
</script>

<style lang="less" scoped>
.bg {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  font-family: Microsoft YaHei;
  // 顶部标题
  .top {}
  .purchase-style-header-forever {
    width: 100%;
    height: 154px;
    position: relative;
    background: url("../../assets/update/hangqingshuju_bg@2x.png");
    background-size: cover;
    background-size: 100% 154px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    .purchase-style-header-forever-item {
      width: calc(100% - 56px);
      height: calc(154px - 50px);
      padding: 25px 28px;
      display: flex;
      flex-direction: column;
      .purchase-style-header-forever-title {
        width: auto;
        height: auto;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #FFFFFF;
      }
      .purchase-style-header-forever-content {
        width: auto;
        height: auto;
        display: flex;
        align-self: center;
        flex-direction: column;
        .purchase-style-header-forever-conten-price {
          width: 200px;
          height: auto;
          font-family: 'Impact';
          font-weight: 400;
          font-size: 40px;
          color: #FFFFFF;
          text-align: center;
        }
        .purchase-style-header-forever-conten-price-shengjiang {
          width: auto; height: auto;
          display: flex;
        }
        .purchase-style-header-forever-conten-price-shengjiang-item {
          width: auto; height: auto;
          display: flex;
          margin: auto;
          margin-top: 4px;
          .purchase-style-header-forever-conten-price-shengjiang-item-icon {
            width: 13px;
            height: 23px;
            display: flex;
            align-self: center;
          }
          .purchase-style-header-forever-conten-price-shengjiang-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .purchase-style-header-forever-conten-price-shengjiang-item-value {
            width: auto;
            height: auto;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #9CE403;
            display: flex;
            align-self: center;
            margin-left: 7px;
          }
        }
      }
    }
  }
  .purchase-style-content-forever {
    width: calc(100% - 60px);
    height: auto;
    display: flex;
    margin: 0 30px;
    flex-direction: column;
    .purchase-style-content-forever-title {
      width: auto;
      height: auto;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      margin-top: 46px;
    }
    .purchase-style-content-forever-header {
      width: 100%;
      height: auto;
      display: flex;
      margin-top: 30px;
    }
    .purchase-style-content-forever-header-left {
      width: 50%;
      height: auto;
      display: flex;
    }
    .purchase-style-content-forever-header-left-item {
      width: 88px;
      height: 44px;
      background: #EBEBEB;
      border-radius: 10px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #8C8989;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .echarts-style {
    width: 100%;
    height: 265px;
    margin-top: 30px;
  }
}
::v-deep .el-input__prefix {
  width: 25px;//这里要给宽度的，要不然会挡住事件，触发不了选择日期
  position: absolute;
  left: 90%!important;
}
::v-deep .el-icon-date {
  background: url(../../assets/update/time_icon@2x.png) center center no-repeat;
  background-size: 20px;
}
::v-deep .el-input__prefix .el-input__icon {
  width: 100%;
}
::v-deep .el-icon-date:before {
  content: "";
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
@font-face {
	font-family: 'Impact';
	src: url('../../assets/styles/IMPACT.TTF');
	font-weight: normal;
	font-style: normal;
}
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .news_classify .el-select {
  margin: 0;
}
.text-value {
  width: auto;
  height: auto;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  margin: auto;
}
.purchase-style-content-forever-header-left-item-active {
  background: #DFE7FC!important;
  color: #1929EC!important;
}
</style>